<template>
  <div class="content-container" style="position: relative;height:calc(100vh - 60px)">
    <div class="panel">
      <div class="content-wrapper">
        <div style="display: flex">
          <div style="display: flex; flex-direction: column">
            <div class="content-item">
              <span style="font-weight: bold; font-size: large; padding-left: 10px">{{ qzApplyPositionInfo.gwmc00 }}</span>
            </div>
            <div class="content-item">
              <span class="item-label">应聘时间:</span>
              <span class="item-value">{{ qzApplyPositionInfo.ypsj00 }}</span>
            </div>
            <div class="content-item">
              <span class="item-label">应聘状态:</span>
              <span class="item-value" style="color: red; font-weight: bold">{{ ypzt00Options[qzApplyPositionInfo.ypzt00] }}</span>
            </div>
          </div>
          <div style="padding: 10px">
            <span style="
                position: absolute;
                padding: 20px;
                font-size: large;
                font-weight: bold;
                right: 220px;
                color: orange;
                white-space: nowrap;
                background-color: #C0DBF2;
                display: inline-block;
                border-radius: 2px;
                box-sizing: border-box">{{ Number(qzApplyPositionInfo.qsxz00 / 1000)
              }}k - {{ Number(qzApplyPositionInfo.jzxz00 / 1000) }}k</span>
          </div>
        </div>
      </div>
      <div class="content-wrapper">
        <div style="margin-top: 10px">
          <y-title content="岗位信息" />
          <div class="content-item">
            <span class="item-label" style="font-weight: bold;">工作年限:</span>
            <span class="item-value">{{ gznx00Options[qzApplyPositionInfo.gznx00] }}</span>
          </div>
          <div class="content-item">
            <span class="item-label" style="font-weight: bold;">学历要求:</span>
            <span class="item-value">{{ xlyq00Options[qzApplyPositionInfo.xlyq00] }}</span>
          </div>
        </div>
        <div style="margin-top: 10px">
          <y-title content="面试信息" />
          <div class="content-item">
            <span class="item-label" style="font-weight: bold;">面试信息:</span>
            <span class="item-value">{{ qzApplyPositionInfo.yymssj ? qzApplyPositionInfo.yymssj : '待预约面试' }}</span>
          </div>
        </div>
        <div style="margin-top: 10px">
          <y-title content="备注" />
          <div class="content-item">
            <span class="item-label" style="font-weight: bold;">备注:</span>
            <span class="item-value">{{ qzApplyPositionInfo.bz0000 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {orderApi} from "@/api/index.js"

export default {
  name: 'full-order-info',
  data() {
    return {
      params: {
        qzypxh: ''
      },
      qzApplyPositionInfo: {},
      ypzt00Options: {
        "1": "未投递简历",
        "2": "已投递简历",
        "3": "预约面试",
        "4": "沟通中",
        "5": "已完成",
        "6": "已取消"
      },
      gznx00Options: {
        "0": "不限",
        "1": "1年以内",
        "2": "1-3年",
        "3": "3-5年",
        "4": "5-10年",
        "5": "10年以上"
      },
      xlyq00Options: {
        "0": "不限",
        "1": "初中及以下",
        "2": "高中/中专",
        "3": "专科",
        "4": "本科",
        "5": "研究生及以上"
      }
    }
  },
  created() {
    const params = this.$route.query
    this.params = {...params}
    this.init()
  },
  methods: {
    init() {
      this.getQzApplyPositionInfo()
    },
    getQzApplyPositionInfo() {
      orderApi.getQzApplyPositionInfo({...this.params}).then(res => {
        this.qzApplyPositionInfo = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.panel {
  position: relative;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .item-label {
    color: lightgray;
    font-size: 16px;
    padding-left: 10px;
  }

  .item-value {
    font-size: 16px;
    padding-left: 10px;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    background-color: white;
    width: 1600px;
    border-radius: 8px;
    margin-top: 20px;
    height: fit-content;

    .content-item {
      display: flex;
      padding-top: 10px;
    }
  }
}
</style>